<!-- 情绪的表情 -->
<template>
	<view class="bodey">
		<heads :text="resultText4"></heads>
		<view class="emotion dis1 dis5 dis3">
			<view class="emotionimages dis dis2 dis4">
				<block v-for="(item,index) in imgUrl" :key="index">
					<view class="images">
						<image :src="item.url2" mode="aspectFit" class="imgs"></image>
						<image :src="item.url1" mode="aspectFit" class="imgs" v-if="index<=isShow(index,emotion)"></image>
					</view>
				</block>

			</view>
			<view class="img container">
				<block v-for="(item,index) in listTo" :key="index">
					<image :src="item.url" mode="aspectFill" class="img_1" v-if="index==isShow(index,emotion)"></image>
				</block>
			</view>
		</view>
		<view class="texts">太棒了你几乎没有情绪问题，每天都是元气满满的天使啊~ </view>
	</view>
</template>

<script>
	import heads from "@/components/head.vue"
	export default {
		components: {
			
			heads
		},
		props: {
			emotion: {
				type: Number
			}
		},
		data() {
			return {
				imgUrl: [{
						url1: '../static/img/1-1.png',
						url2: '../static/img/1-2.png'
					},
					{
						url1: '../static/img/2-1.png',
						url2: '../static/img/2-2.png'
					},
					{
						url1: '../static/img/3-1.png',
						url2: '../static/img/3-2.png'
					},
					{
						url1: '../static/img/4-1.png',
						url2: '../static/img/4-2.png'
					},
					{
						url1: '../static/img/5-1.png',
						url2: '../static/img/5-2.png'
					}
				],
				listTo: [{
						url: '../static/img/1.png',
					},
					{
						url: '../static/img/2.png',
					}, {
						url: '../static/img/3.png',
					}, {
						url: '../static/img/4.png',
					}, {
						url: '../static/img/5.png',
					}
				],
				resultText4: '情绪指数',
			};
		},
		methods: {
			isShow(index, emotion) {
				// let that =this;
				if (emotion <= 20) {
					return 0;
				} else if (emotion <= 40) {
					return 1;
				} else if (emotion <= 60) {
					return 2;
				} else if (emotion <= 80) {
					return 3;
				} else if (emotion <= 100) {
					return 4;
				} else {
					return -1;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../common/css/flex.css";
	@import "../common/css/index.scss";
	// page{
	// 	background-color: #FBF2D6;
	// }
	.bodey{
		width: 686upx;
		height: 421upx;
		background: #FFFFFF;
		border-radius: 24upx;
		margin: auto;
	}
	.emotion {
		width: 598upx;
		height: 200upx;

		margin: 0 auto;

		.emotionimages {
			width: 100%;
			height: 138upx;

			.images {
				width: 68upx;
				height: 68upx;
				position: relative;

				.imgs {
					width: 68upx;
					height: 68upx;
					position: absolute;
				}
			}

		}

		.img {
			width: 100%;
			height: 20upx;
			position: relative;

			.img_1 {
				width: 100%;
				height: 100%;
				position: absolute;
			}
		}
	}
	.texts{
		width: 598upx;
		margin: auto;
		font-size: 28upx;
		font-family:$typeface1;
		font-weight: 400;
		color: #666666;
	}
</style>
